<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="unis/jquery.min.js"></script>
<style>
    body,p,h1,h2,h3,ul,li,a{
        margin: 0;
        padding: 0;
        font-family: '微软雅黑';
    }
    body{
        min-width: 1100px;

    }

    ul,li{
        list-style: none;
    }
    a {
        text-decoration:none;
        out-line: none;
    }
    .content{
        width: 80%;
        margin: 0 auto;
    }
    .header{
        line-height: 80px;
        background: #f7bb59;
        text-indent: 1em;
        color: #ffffff;
    }
    .tables{
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    .tables td{
        height: 40px;
        border: 1px solid #ccc;
        position: relative;
        width: 40px;
    }
    .left{
        width: 65%;
        float: left;
    }
    .right{
        width: 35%;
        float: right;
    }
    .right li{
        text-align: center;
        width: 30%;
        float: left;
        line-height: 30px;

    }
    .btnfooter {
        clear: both;
    }
    .btnfooter li{
        margin-left: 30px;
        width: 55px;
        height: 55px;
        float: right;
        overflow: hidden;
    }
    .btnfooter li:first-child img{
        margin: -257px 0px 0px -10px;
    }
    .btnfooter li:nth-child(2) img{
        margin: -135px 0px 0px -0px;
    }
    html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;}
</style>
<body>
<div class="content">
    <h2 class="header">请根据右侧提示在格子中找出对应的单词</h2>
</div>
<div class="main content">
    <div class="left">
        <table class="tables">

        </table>
    </div>
    <div class="right">
        <ul class="daanInfo">
            <li>111</li>
        </ul>
    </div>
    <ul class="btnfooter">
        <li>
            <img src="img/ionc.PNG" alt="">
        </li>
        <li>
            <img src="img/ionc.PNG" alt="">
        </li>
        <li class="isovers">
            <img src="img/ionc.PNG" alt="">
        </li>
    </ul>
</div>

</body>
<script>
    if(document.all){
        document.onselectstart= function(){return false;}; //for ie
    }else{
        document.onmousedown= function(){return false;};
        document.onmouseup= function(){return true;};
    }
    document.onselectstart = new Function('event.returnValue=false;');
    (function(w){
        var opt = {
            getDoms : function(){
                this.doms = {
                    tables : $('.tables'),
                    daanInfo : $('.daanInfo'),
                    ifover : 0,
                    isovers : $('.isovers')
                }
            },
            init : function(){
                var _self = this;
                _self.getDoms();
                _self.addEvent();
                _self.table_m(_self);
            },
            addEvent : function(){
                var _self = this;
                _self.doms.isovers.on('click',function(){
                   if($('.daanInfo').find('li').length==0){
                       alert('恭喜通关')
                   }else{
                       alert('请完成该关卡')
                   }
                })
                _self.doms.tables.on('mousedown',function(ev){
                    var arr = new Array();
                    var inde = new Array();
                    var onecolor = new Array();
                    $('.setText').on('mousemove',function(ev){
                        arr.push(
                                $(this).html()
                        );
                        inde.push(
                                $(this).attr('oder')
                        );
                        if($(this).css('background')=='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box'){
                            onecolor.push(
                                    $(this).attr('oder')
                            )
                        }

                        $(this).css('background','#c2c2c2')

                    });
                    $(document).on('mouseup',function(){
                        var arrs = arr.unique();
                        var data = _self.data();
                        var daan = data.daan;
                        var indexs = inde.unique();
                        var onecolors = onecolor.unique();
                        for(var i=0;i<daan.length;i++){
                            if(daan[i]!=arrs.join('')){
                                for(var j=0;j< indexs.length;j++){
                                    for(var g=0;g<$('.setText').length;g++){
                                        if($('.setText').eq(g).attr('oder')==indexs[j]) {
                                            $('.setText').eq(g).css('background','#ffffff')
                                        }
                                    }
                                }
                            }
                        }
                        for(var i=0;i<daan.length;i++){
                            if(daan[i]==arrs.join('')){
                                _self.doms.ifover++
                                for(var p=0;p<$('.daanInfo').find('li').length;p++){
                                    if(arrs.join('')==$('.daanInfo').find('li').eq(p).attr('daan')){
                                        $('.daanInfo').find('li').eq(p).remove();
                                    }
                                }


                                for(var j=0;j< indexs.length;j++){
                                    for(var g=0;g<$('.setText').length;g++){
                                        if($('.setText').eq(g).attr('oder')==indexs[j]) {
                                            $('.setText').eq(g).css('background','#ccc')
                                        }
                                    }
                                }
                            }
                        }

                        for(var i=0;i<onecolors.length;i++){
                            for(var g=0;g<$('.setText').length;g++){
                                if($('.setText').eq(g).attr('oder')==onecolors[i]) {
                                    $('.setText').eq(g).css('background','#ccc')
                                }
                            }
                        }
                        $('.setText').off();
                        $(document).off();


                    })
                })
            },
            data : function(){
                return JSON.parse(localStorage.data)
            },
            table_m:function(_slef){
                //模板
                var data = _slef.data();
                var h = data.h;
                var l = data.l;
                var daan = data.daan;
                var tishi = data.tishi
                var textArr = data.textArr
                var text = "";
                var ac = 0;
                for(var i=0;i<l;i++){
                    text += "<tr class='delage_l'></tr>"
                }
                _slef.doms.tables.html(text);
                for(var i=0;i<l;i++){
                    var textl = '';
                    for(var j=0;j<h;j++){
                        ac++;
                        textl +=
                                '<td oder="'+[j+(i*h)]+'" class="setText">' +
                                textArr[j+(i*h)]
                                '</td>'
                    }
                    $('.delage_l').eq(i).html(textl)
                }
                var reg= /^[A-Za-z]+$/;
                for(var i=0;i<$('.setText').length;i++){
                    if(!reg.test($('.setText').eq(0).html())){
                        if($('.setText').eq(i).html()==''){
                            eval( "var word=" +  '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');
                            $('.setText').eq(i).html(word)
                        }
                    }else{
                        var character = String.fromCharCode(Math.floor( Math.random() * 26) + "a".charCodeAt(0));
                        $('.setText').eq(i).html(character)
                    }
                }
                var dataText = "";
                for(var i=0;i<tishi.length;i++){
                    if(tishi[i]!='') {
                        dataText += "<li daan=" + daan[i] + ">" + tishi[i] + "</li>"
                    }
                }

                _slef.doms.daanInfo.html(dataText);
            }
        }
        opt.init();
    })(window)
    Array.prototype.unique = function() {
        var ret = new Array();
        for(var i=0;i< this.length;i++){
            if(this[i]!=this[i+1]){
                ret.push(this[i])
            }
        }
        return ret;
    }
</script>
</html>